<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>javascript放大镜效果.</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
</head>
<style>
	*{margin:0px;padding: 0px; font-family: '微软雅黑'}
	div.zoomitem{width: 500px;height: auto; text-align: center; position: relative;margin:10px auto 20px auto;}
	div.zoomitem img{width: 100%;height: 100%; vertical-align: middle;}
	div.zoomItem3 {margin:0 0 0 0;width: 280px;}
	div.zoomItem3 .cloudZoom{width: 300px;height: 371px; position: absolute; left: 300px; top:0px; background: #ccc;border:2px solid #ccc; }
	.imgZoom{position: absolute;left: -70px; top: -70px;width: 180px;height: 180px;box-shadow: 0px 0px 8px #222,0px 0px 14px #333 inset; border-radius: 50%; border:10px solid #fff; display: none;cursor:none;z-index: 999;}
	.imgZoom2{position: absolute;left: 0px; top: 0px;width: 100%;height: 100%; display: none;cursor:crosshair;z-index: 999;}
	.imgZoom3{position: absolute;left: 0px; top: 0px;width: 100px;height: 100px; display: none;cursor:crosshair;z-index: 999;background: #fff;opacity: 0.7;}
 	.imgLoad{display: inline-block; background: #222;padding: 3px 10px; border-radius: 4px; position: absolute; z-index: 9999;left: 50%; top: 50%; color: #fff;border:1px solid #fff; margin-left: -30px;margin-top: -13px;}
	.cloudZoom{width: 300px;height: 371px; position: absolute; left: 330px; top:0px; background: #ccc;border:2px solid #ccc; }
    </style>
<body style="height:3000px;">

	
    <div class="zoomitem zoomItem1">
    	<img src="z1.jpg" alt="" class="zoom-img">
    </div>
    <div class="zoomitem zoomItem2">
    	<img src="z1.jpg" alt="" class="zoom-img">
    </div>
    <div class="zoomitem zoomItem3">
    	<img src="z1.jpg" alt="" class="zoom-img">
    </div>
    
</body>
<script src="zoom.js"></script>
<script>
(function(){
	zoom('.zoomItem1').init();  
	zoom('.zoomItem2').init(1);  
	zoom('.zoomItem3').init(2);  
})();
</script>
</html>	